<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>列表到详情最佳实践</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.mui-media {
				font-size: 14px;
			}
			
			.mui-table-view .mui-media-object {
				max-width: initial;
				width: 90px;
				height: 70px;
			}
			
			.meta-info {
				position: absolute;
				left: 115px;
				right: 15px;
				bottom: 8px;
				color: #8f8f94;
			}
			
			.meta-info .author,
			.meta-info .time {
				display: inline-block;
			}
			
			.meta-info .time {
				float: right;
			}
			
			.mui-table-view:before,
			.mui-table-view:after {
				height: 0;
			}
			
			.mui-content>.mui-table-view:first-child {
				margin-top: 1px;
			}
			
			.banner {
				height: 180px;
				overflow: hidden;
				position: relative;
				background-position: center;
				background-color: #ccc;
			}
			
			.banner img {
				width: 100%;
				height: auto;
			}
			
			.banner .title {
				position: absolute;
				left: 15px;
				bottom: 15px;
				width: 90%;
				font-size: 16px;
				font-weight: 400;
				line-height: 21px;
				color: white;
				z-index: 11;
			}
		</style>
	</head>

	<body>

		<div class="mui-content" id="news">
			<!--列表信息流 开始-->
			<div id="list" class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media" v-for="item in items">
							<a href="javascript:;"  @tap="openContent(item.news_id)">
								<img class="mui-media-object mui-pull-left" v-bind:src="item.firstimg">
								<div class="mui-media-body">
									{{item.title}}
									<p class="mui-ellipsis">来源：{{item.source}}</p>
								</div>
							</a>
						</li>

					</ul>
				</div>
			</div>
			<!--列表信息流 结束-->
		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/tools.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			var news = new Vue({
				el: '#news',
				data: {
					items: [] //列表信息流数据
				},
				methods: {
					/**
					 * 打开新闻详情页
					 */
					openContent: function(news_id) {
						tools.openPage("content.html?news_id="+news_id,"content.html");
					}
				}
			});

			var pno = 1;

			//mui初始化，配置下拉刷新
			mui.init({
				pullRefresh: {
					container: '#list',
					down: {
						style: 'circle',
						offset: '0px',
						auto: true,
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
						callback: pullupRefresh
					}
				}
			});
			/**
			 *  下拉刷新获取最新列表 
			 */
			function pulldownRefresh() {
				pno = 1;
				$.ajax({
					type: "POST",
					url: c.apiUrl + "/Vxsel/getNewsList",
					data: {
						pno: pno,
						ps: 10
					},
					success: function(res) {
						mui('#list').pullRefresh().endPulldownToRefresh();
						mui('#list').pullRefresh().refresh(true);//每次下拉到顶部时候重置上拉
						if(res.code == 0) {
							console.log("下拉")
							news.items = res.data.list;
						}
					}
				});

			}

			/**
			 * 上拉加载拉取历史列表 
			 */
			function pullupRefresh() {
				$.ajax({
					type: "POST",
					url: c.apiUrl + "/Vxsel/getNewsList",
					async: false,
					data: {
						pno: pno,
						ps: 10
					},
					success: function(res) {
						mui('#list').pullRefresh().endPullupToRefresh(++pno>res.data.totalPage);//参数为true代表没有更多数据了,会禁止上拉
						if(res.code == 0) {
							console.log("上拉")
							news.items = news.items.concat(res.data.list);
						}
					}
				});
			}
			
		</script>
	</body>

</html>